<template>
  <div class="articleC">
    <!-- 导航栏 -->
    <van-nav-bar
      left-arrow
      @click-left="onClickLeft"
    >
      <template #right>
        <van-icon
          name="more-o"
          size="24"
        />
      </template>
      <template #left>
        <van-icon name="arrow-left" />
        <div
          v-if="scrollTop > 120"
          class="titleUser"
        >
          <img :src="i.aut_photo">
          <span>{{ i.aut_name }}</span>
          <span class="titleSeg">I</span>
          <span class="fllow">关注</span>
        </div>
      </template>
    </van-nav-bar>
    <!-- 主体内容 -->
    <main
      ref="main"
      @scroll="onScorll"
    >
      <!-- 标题栏 -->
      <div class="title">
        <!-- 标题 -->
        <h3>{{ i.title }}</h3>
        <!-- 发布栏 -->
        <div class="public">
          <span>{{ getDay(i.pubdate) }} |</span>
          <span>{{ i.read_count }}阅读 |</span>
          <span>{{ i.comm_count }}评论</span>
        </div>
        <!-- 作者栏 -->
        <div class="user">
          <img :src="i.aut_photo">
          <span>{{ i.aut_name }}</span>
          <button>+关注</button>
        </div>
      </div>
      <!-- 文章内容 -->
      <div class="articleCon">
        <div v-html="i.content" />
        <div class="articleTime">文章发布时间：{{ getDay(i.pubdate) }}</div>
      </div>
      <!-- 分割 -->
      <div class="seg" />
      <!-- 评论区 -->
      <div class="comment">
        <van-nav-bar>
          <template #left>
            全部评论（{{ com.comm_count }}）
          </template>z
          <template #right>
            {{ com.total_count }}点赞
          </template>
        </van-nav-bar>
        <!-- 评论列表 -->
      </div>
      <!-- 评论列表 -->
      <van-empty
        v-if="!com.comm_count"
        description="稳得呀批"
      />
      <div v-else>
        <div
          v-for="(item, a) in com.results"
          :key="a"
          class="commList"
        >
          <!-- 头像 -->
          <img :src="item.aut_photo">
          <!-- 右侧评论 -->
          <div class="commRight">
            <!-- 头部 -->
            <div class="commHead">
              <span>{{ item.aut_name}}</span>
              <div>
                {{ item.like_count }}<van-icon name="good-job-o" />
              </div>
            </div>
            <!-- 评论内容 -->
            <div class="commContent">{{ item.content }}</div>
            <!-- 回复 -->
            <div>
              <button>{{ item.reply_count > 0 ?item.reply_count: '' }}回复 ></button>
              <span class="commTime">{{ getCommTime(item.pubdate) }}</span>
            </div>
          </div>
        </div>
        <div class="noMore">没有更多了</div>
      </div>
    </main>
    <!-- 操作区 -->
    <van-goods-action>
      <van-search
        placeholder="抢撒发"
        shape="round"
        left-icon="edit"
      />
      <van-goods-action-icon
        icon="chat-o"
        text="评论"
        :badge=" com.comm_count > 0 ? com.comm_count : ''"
      />
      <van-goods-action-icon
        icon="good-job-o"
        text="点赞"
      />
      <van-goods-action-icon
        icon="like-o"
        text="收藏"
      />
      <van-goods-action-icon
        icon="share-o"
        text="分享"
      />
    </van-goods-action>
  </div>
</template>

<script>
import moment from 'moment'
import { mapActions, mapState } from 'vuex'
export default {
  name: 'ArticleContent',
  data() {
    return {
      scrollTop: 0,
      length: 0,
    }
  },
  computed: {
    ...mapState('article', [
      'articleContent'
    ]),
    ...mapState('comments', [
      'commentsList'
    ]),
    i() {
      return this.articleContent
    },
    com() {
      return this.commentsList
    },
  },
  methods: {
    ...mapActions('article', [
      'updateArticleContent'
    ]),
    ...mapActions('comments', [
      'updateCommentsList'
    ]),
    onClickLeft() {
      this.$router.go(-1)
    },
    getCommTime(time) {
      return moment(time).fromNow();
    },
    onScorll() {
      this.scrollTop = this.$refs.main.scrollTop
    },
    getDay(day) {
      return moment(day).format('YYYY MMMDo')
    }
  },
  created() {
    this.updateArticleContent(this.$route.query.article_id)
    this.updateCommentsList(['a', this.$route.query.article_id])
  }
}
</script>

<style lang="less" scoped>
.articleC {
  background-color: #eee;
}
.titleUser {
  display: flex;
  justify-content: left;
  margin-left: 15px;
  align-items: center;
  font-size: 12px;
  img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
  }
  span {
    margin: 0 4px;
  }
  .fllow {
    color: orange;
  }
  .titleSeg {
    color: #aaa;
  }
}
main {
  background-color: #fff;
  height: calc(100vh - 46px - 50px);
  overflow: auto;
  margin-bottom: 30px;

  h3 {
    font-weight: 500;
    font-size: 24px;
    padding: 0;
    margin: 10px 0;
  }
  .title {
    padding: 0 15px;
    border-bottom: 1px solid #eee;
    .public {
      font-size: 12px;
      color: #aaa;
      span {
        margin-right: 4px;
      }
    }

    .user {
      position: relative;
      display: flex;
      align-items: center;
      margin-top: 15px;
      margin-bottom: 30px;
      img {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        margin-right: 8px;
      }
      span {
        font-size: 14px;
      }
      button {
        position: absolute;
        right: 10px;
        border-radius: 14px;
        border: none;
        padding: 6px 10px;
        font-size: 12px;
        background-color: rgb(255, 115, 0);
        color: #fff;
      }
    }
  }
  .articleCon {
    padding: 0 15px;
    .articleTime {
      color: #aaa;
      font-size: 12px;
      margin-left: 55%;
    }
  }
  .seg {
    width: 100%;
    height: 12px;
    background-color: #ccc;
  }
  .noMore {
    margin-top: 10px;
    font-size: 14px;
    color: #ccc;
    width: 100%;
    height: 20px;
    line-height: 20px;
    text-align: center;
  }

  .commList {
    display: flex;
    margin-bottom: 20px;
    margin-top: 8px;

    img {
      margin-left: 15px;
      width: 32px;
      height: 32px;
      border-radius: 50%;
    }

    .commRight {
      margin-top: 8px;
      margin-left: 10px;
      width: calc(100% - 32px);
      .commHead {
        display: flex;
        justify-content: space-between;
        div {
          margin-right: 15px;
          span {
            font-size: 14px;
          }
        }
      }
      .commContent {
        margin: 10px 0;
      }
      button {
        font-size: 12px;
        border-radius: 6px;
        border: none;
        margin: 0 10px 0 5px;
      }
      .commTime {
        font-size: 12px;
        color: #aaa;
      }
    }
  }
}
</style>
